<template>
  <div>
    <!-- <img class="sxc-audio" :src="cover" v-if="!play" /> -->
    <audio-player :urls="bgAudioList" v-if="play" />
  </div>
</template>

<script>
export default {
  name: 'sxc-audio',
  components:{
    'audio-player': () => import('@/components/audio-player')
  },
  props: {
    bgAudioList: {
      type: Array,
      default: () => []
    },
    play: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      defaultImg: './static/img/img-audio.png',
      playIndex: 0
    }
  },
  computed: {
    cover () {
      return this.bgAudioList.length && this.bgAudioList[0].cover ? this.bgAudioList[0].cover : this.defaultImg
    },
    audioData () {
      const { bgAudioList, defaultImg, playIndex } = this
      const url = bgAudioList[playIndex].filePath
      return {
        url: url,
        cover: defaultImg,
        muted: false,
        loop: false,
        preload: 'auto',
        poster: '',
        volume: 1,
        autoplay: true
      }
    }
  },
  mounted() {
  },
  methods: {
    onPlayEnd () {
      const { bgAudioList, playIndex } = this
      if (playIndex < bgAudioList.length - 1) {
        this.playIndex = playIndex + 1
        setTimeout(() => {
          this.$refs.audioPlayer && this.$refs.audioPlayer.play()
        }, 60)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.sxc-audio {
  width: 100%;
  height: 100%;
}
</style>
